<script setup>
  import { List,Grid,UserFilled } from '@element-plus/icons-vue';
import axios from 'axios';
  import { ref } from 'vue'
  import { useUserStore } from '@/stores/index'
 import router from '@/router/index'
  const userStore = useUserStore()
  const username = userStore.username 
  console.log(username)
  
//登出功能
  const logout = () => {
    userStore.setToken('')
    userStore.setUserName('')
    router.push('/login')
  }
</script>

<template>
    <el-container>
        <div class="layout">
          <el-aside width="200px">
          <el-menu 
          background-color="#545c64" 
          :default-active="'/main/select'"
          text-color="#fff" 
          active-text-color="#ffd04b"
          router>
          <div style="text-align: center;margin-top: 20px;">
            <el-avatar shape="circle" :size="75" :src="userStore.pic" />
          </div>
          <div style="text-align: center;">
            <el-text  type="success" size="large">{{username}}</el-text>
          </div>
            <el-menu-item index="/main/select" >
              <el-icon><Grid/></el-icon>
              <span>选课</span>
            </el-menu-item>
            <el-menu-item index="/main/mylessons">
              <el-icon><List/></el-icon>
              <span >已选课程</span>
            </el-menu-item>
            <el-menu-item index="/main/space">
              <el-icon><UserFilled/></el-icon>
              <span >个人主页</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <div style="text-align: center;">
          <el-button type="danger" @click="logout()">退出登录</el-button>
      </div>
      </div>
      <el-main>
          <router-view></router-view>
      </el-main>
    </el-container>
</template>

<style> 
  .layout {
    background-color: #545c64;
    height: 100vh;
  }
</style>
